<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
    <script src="../boot&jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="../boot&jquery/css/bootstrap.css">
    <script src="../boot&jquery/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/css/LoginPageStyleSheet.css">
    <script language="JavaScript">
    if (window != top)
        top.location.href = location.href;
    </script>
</head>
<body>

<div id="main" class="col-lg-4 col-lg-offset-4  col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 container col-center-block">
    <h1>欢迎您的到来!</h1>
    <h1>请登录</h1>
    <form class="form-horizontal" role="form" id="fom">
        <div class="form-group" >
            <label for="firstname" class="col-sm-2 control-label" >用户名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="请输入用户名" name="auser">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="lastname" placeholder="请输入密码" name="apsw">
            </div>
        </div>
        <div class="form-group">
            <p>
                <input type="button" class="btn btn-primary btn-lg" value="登录" onclick="denglu()"/>
                <input type="button" class="btn btn-primary btn-lg" value="注册" data-toggle= 'modal' data-target='#add' />
            </p>
        </div>
    </form>
</div>

    <!-- 注册模态框（Modal） -->
    <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabe" aria-hidden="true">
        <form class="form-horizontal" role="form" method="post" id="fom2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabe">用户注册</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-success show">
                            <label class="col-sm-2 control-label " for="uname">
                                用户名:
                            </label>
                            <div class="col-sm-10 " >
                                <input type="text" class="form-control input-group-lg " id="uname" name="uname" >
                            </div>
                        </div>
                        <div class="form-group has-success show">
                            <label class="col-sm-2 control-label " for="upsw">
                                设置密码:
                            </label>
                            <div class="col-sm-10 " >
                                <input type="password" class="form-control input-group-lg " id="upsw" name="upsw" >
                            </div>
                        </div>
                        <div class="form-group has-success show">
                            <label class="col-sm-2 control-label " for="upsw2">
                                确认密码:
                            </label>
                            <div class="col-sm-10 " >
                                <input type="password" class="form-control input-group-lg " id="upsw2" name="upsw2" >
                            </div>
                        </div>
                        <div class="form-group has-success show">
                            <label class="col-sm-2 control-label " for="uemail">
                                设置邮箱:
                            </label>
                            <div class="col-sm-10 " >
                                <input type="text" class="form-control input-group-lg " id="uemail" name="uemail" >
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" class="btn btn-primary" value="提交注册" onclick="insertADD()"/>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </form>
    </div>

</body>
    <script>

        //清空模态框内容
        $(function () { $('#add').on('hide.bs.modal', function (e) {
            $('#fom2')[0].reset();
        })
        });

        //登录判定
        function denglu() {
            let fom = $("#fom").serialize();
            $.ajax({
                url:"/Book/userservlet?op=findMore",
                type:"post",
                dataType:"json",
                data:fom,
                sync:false,
                success:function (b) {
                    if(b){
                        window.location.href=location.origin+"/Book/MainHomePage.html?PersonalCenter";
                    }else {
                        alert("用户名或者密码输入错误,请重新输入!");
                        $("#firstname").val("");
                        $("#lastname").val("");
                    }
                }
            })
        }

        //注册功能
        function insertADD() {
          let psw1 = $("#upsw").val();
          let psw2 = $("#upsw2").val();
          if(psw1 == psw2){
              let fom2 = $("#fom2").serialize();
              $.ajax({
                  url:"/Book/userservlet?op=insertADD",
                  type: "post",
                  dataType: "json",
                  data: fom2,
                  sync: false,
                  success:function (b) {
                      if(b){
                          alert("注册成功,请登录!");
                      }else {
                          alert("新增用户失败!");
                      }
                  }
              })
          }else {
              alert("两次输入密码不一致,请重新输入!");
              $("#upsw").val("");
              $("#upsw2").val("");
          }
        }
    </script>
</html>
